<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>联系客服</title>
  <link rel="stylesheet" href="ui.css">
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: white;
      padding: 20px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    .logo-container {
      display: flex;
      align-items: center;
    }

    .logo-text {
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }

    .sub-nav {
      margin-left: auto;
    }

    .sub-nav a {
      color: #666;
      text-decoration: none;
      margin-left: 15px;
    }

    .sub-nav a:hover {
      color: #007BFF;
    }

    .main-content {
      max-width: 800px;
      margin: 50px auto;
      background-color: white;
      padding: 30px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .contact-form {
      margin-bottom: 30px;
    }

    .contact-form h2 {
      margin-bottom: 20px;
      font-size: 20px;
    }

    .contact-form label {
      display: block;
      margin-bottom: 5px;
    }

    .contact-form input,
    .contact-form textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }

    .contact-form button {
      background-color: #007BFF;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }

    .contact-form button:hover {
      background-color: #0056b3;
    }

    .chat-widget {
      margin-bottom: 30px;
    }

    .chat-widget h2 {
      margin-bottom: 20px;
      font-size: 20px;
    }

    .chat-widget p {
      margin-bottom: 10px;
    }

    .faq-section h2 {
      margin-bottom: 20px;
      font-size: 20px;
    }

    .faq-item {
      margin-bottom: 15px;
    }

    .faq-item h3 {
      margin-bottom: 5px;
      font-size: 16px;
    }

    .faq-item p {
      margin: 0;
    }
  </style>
</head>

<body>
<!-- 顶部导航栏 -->
<header>
  <div class="top-bar">
    <div class="logo-container">
      <span class="logo-text">浮点流觞</span>
    </div>
    <div class="sub-nav">
      <a href="gerenzhongxin.html">个人中心</a>
      <a href="#">商家中心</a>
      <a href="#">帮助中心</a>
      <a href="#">联系客服</a>
      <a href="#">网站导航</a>
      <a href="login.html" class="login-item">登录</a>
      <a href="register.html" class="register-item">注册</a>
    </div>
  </div>
</header>

<!-- 主内容区域 -->
<div class="main-content">
  <!-- 联系表单部分 -->
  <div class="contact-form">
    <h2>给我们发送消息</h2>
    <form action="#">
      <label for="name">姓名</label>
      <input type="text" id="name" placeholder="请输入您的姓名" required>
      <label for="email">邮箱</label>
      <input type="email" id="email" placeholder="请输入您的邮箱" required>
      <label for="message">消息内容</label>
      <textarea id="message" placeholder="请输入您的问题或建议" required></textarea>
      <button type="submit">提交</button>
    </form>
  </div>

  <!-- 在线聊天模拟部分 -->
  <div class="chat-widget">
    <h2>在线聊天</h2>
    <p>我们的客服人员将尽快为您提供帮助。</p>
    <p>当前在线客服：[客服姓名]，预计等待时间：[X]分钟</p>
  </div>

  <!-- 常见问题解答部分 -->
  <div class="faq-section">
    <h2>常见问题</h2>
    <div class="faq-item">
      <h3>如何发布房源？</h3>
      <p>您可以点击网站首页的“免费发布”按钮，然后按照页面提示填写房源信息并提交即可。</p>
    </div>
    <div class="faq-item">
      <h3>如何修改个人信息？</h3>
      <p>请进入个人中心，点击“我的资料”选项，然后进行相应的信息修改并保存。</p>
    </div>
    <!-- 可以添加更多常见问题 -->
  </div>
</div>

<script src="script.js"></script>
</body>

</html>